<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 注册</title>
    <link rel="stylesheet" th:href="@{/css/common/reset.css}">
    <link rel="stylesheet" th:href="@{/css/common/variables.css}">
    <link rel="stylesheet" th:href="@{/css/components/forms.css}">
    <link rel="stylesheet" th:href="@{/css/components/buttons.css}">
    <link rel="stylesheet" th:href="@{/css/components/alerts.css}">
    <link rel="stylesheet" th:href="@{/css/pages/register.css}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
</head>
<body>
    <div class="register-container">
        <div id="particles-js"></div> <!-- 粒子效果背景 -->
        <div class="register-card">
            <!-- 左侧品牌展示区 -->
            <div class="register-banner">
                <h1>智能医疗诊断助手</h1>
                <p>专业的医疗人工智能诊断系统，助力医生提高诊断效率</p>
                <!-- 添加医疗相关的图标 -->
                <div class="icon-container">
                    <img th:src="@{/images/medical-logo.svg}" alt="医疗图标" width="80" height="80">
                </div>
            </div>
            
            <!-- 右侧注册表单区 -->
            <div class="register-form">
                <div class="form-container">
                    <div class="form-header">
                        <h3>用户注册</h3>
                        <p>创建您的账户，开始使用智能医疗诊断助手</p>
                    </div>
                    
                    <!-- 提示信息容器 -->
                    <div id="alertContainer"></div>
                    
                    <form id="registerForm" onsubmit="return handleSubmit(event)">
                        <div class="form-row">
                        <div class="form-group">
                                <label for="username" class="form-label">用户名 <span class="required">*</span></label>
                            <input 
                                type="text" 
                                id="username" 
                                name="username" 
                                class="form-input" 
                                placeholder="请输入用户名"
                                autocomplete="username"
                                required
                            >
                            <div id="username-error" class="error-message"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                        <div class="form-group">
                                <label for="password" class="form-label">密码 <span class="required">*</span></label>
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                class="form-input" 
                                placeholder="请输入密码"
                                autocomplete="new-password"
                                required
                            >
                            <div id="password-error" class="error-message"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                        <div class="form-group">
                                <label for="confirmPassword" class="form-label">确认密码 <span class="required">*</span></label>
                            <input 
                                type="password" 
                                id="confirmPassword" 
                                name="confirmPassword" 
                                class="form-input" 
                                placeholder="请再次输入密码"
                                autocomplete="new-password"
                                required
                            >
                            <div id="confirmPassword-error" class="error-message"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="realName" class="form-label">真实姓名</label>
                                <input 
                                    type="text" 
                                    id="realName" 
                                    name="realName" 
                                    class="form-input" 
                                    placeholder="请输入真实姓名"
                                    autocomplete="name"
                                >
                                <div id="realName-error" class="error-message"></div>
                            </div>
                        </div>
                        
                        
                        
                        <div class="form-row">
                        <div class="form-group">
                            <label for="mobile" class="form-label">手机号码</label>
                            <input 
                                type="tel" 
                                id="mobile" 
                                name="mobile" 
                                class="form-input" 
                                placeholder="请输入手机号码"
                                autocomplete="tel"
                            >
                            <div id="mobile-error" class="error-message"></div>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="role" class="form-label">用户角色</label>
                                <select id="role" name="role" class="form-input">
                                    <option value="PATIENT">患者</option>
                                    <option value="DOCTOR">医生</option>
                                    <option value="NURSE">护士</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="register-action">
                            <button 
                                type="submit" 
                                id="registerButton" 
                                class="btn btn-primary"
                            >
                                <span>注册</span>
                            </button>
                        </div>
                        
                        <div class="form-links">
                            <span>已有账号？</span>
                            <a th:href="@{/login}">返回登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 脚本引入 -->
    <script th:src="@{/js/effects/particles.js}"></script>
    <script>
        // 初始化粒子效果
        document.addEventListener('DOMContentLoaded', function() {
            try {
                console.log("初始化粒子背景...");
                // 使用ParticleBackground类初始化
                new ParticleBackground({
                    selector: '.register-container',
                    particleCount: 80,
                    connectDistance: 120,
                    moveSpeed: 0.6,
                    colors: ['#8cdbff', '#7adb89', '#5bc4b8']
                });
                console.log("粒子背景初始化完成");
            } catch (error) {
                console.error("初始化粒子背景出错:", error);
                
                // 备选方案: 尝试使用particlesJS
                try {
                    if (typeof particlesJS !== 'undefined') {
                        particlesJS('particles-js', {
                            particles: {
                                number: { value: 80, density: { enable: true, value_area: 800 } },
                                color: { value: '#4ade80' },
                                shape: { type: 'circle' },
                                opacity: { value: 0.5, random: false },
                                size: { value: 3, random: true },
                                line_linked: {
                                    enable: true,
                                    distance: 150,
                                    color: '#38bdf8',
                                    opacity: 0.4,
                                    width: 1
                                },
                                move: {
                                    enable: true,
                                    speed: 2,
                                    direction: 'none',
                                    random: false,
                                    straight: false,
                                    out_mode: 'out',
                                    bounce: false
                                }
                            },
                            interactivity: {
                                detect_on: 'canvas',
                                events: {
                                    onhover: { enable: true, mode: 'grab' },
                                    onclick: { enable: true, mode: 'push' },
                                    resize: true
                                },
                                modes: {
                                    grab: { distance: 140, line_linked: { opacity: 1 } },
                                    push: { particles_nb: 4 }
                                }
                            },
                            retina_detect: true
                        });
                        console.log("使用particlesJS初始化完成");
                    }
                } catch (particlesError) {
                    console.error("备选粒子背景初始化失败:", particlesError);
                }
            }
        });
    </script>
    <script th:src="@{/js/utils/validator.js}"></script>
    <script th:src="@{/js/utils/api.js}"></script>
    <script th:src="@{/js/pages/register.js}"></script>
    <script>
        // 处理表单提交
        function handleSubmit(event) {
            event.preventDefault(); // 阻止表单默认提交
            
            // 防止重复提交
            const registerButton = document.getElementById('registerButton');
            if (registerButton.disabled || registerButton.classList.contains('btn-loading')) {
                console.log('表单正在提交中，请勿重复点击');
                return false; // 如果按钮已禁用或正在加载，不重复处理
            }
            
            // 立即禁用按钮，防止多次点击
            registerButton.disabled = true;
            registerButton.classList.add('btn-loading');
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const realName = document.getElementById('realName').value;
            const email = document.getElementById('email').value;
            const mobile = document.getElementById('mobile').value;
            const role = document.getElementById('role').value;
            
            // 表单验证
            let isValid = true;
            
            // 验证用户名
            if (!username || username.length < 3) {
                document.getElementById('username-error').textContent = '用户名至少需要3个字符';
                isValid = false;
            } else {
                document.getElementById('username-error').textContent = '';
            }
            
            // 验证密码
            if (!password || password.length < 6) {
                document.getElementById('password-error').textContent = '密码至少需要6个字符';
                isValid = false;
            } else {
                document.getElementById('password-error').textContent = '';
            }
            
            // 验证确认密码
            if (password !== confirmPassword) {
                document.getElementById('confirmPassword-error').textContent = '两次输入的密码不一致';
                isValid = false;
            } else {
                document.getElementById('confirmPassword-error').textContent = '';
            }
            
            // 验证邮箱格式
            if (email && !validateEmail(email)) {
                document.getElementById('email-error').textContent = '请输入有效的电子邮箱地址';
                isValid = false;
            } else {
                document.getElementById('email-error').textContent = '';
            }
            
            // 验证手机号格式
            if (mobile && !validateMobile(mobile)) {
                document.getElementById('mobile-error').textContent = '请输入有效的手机号码';
                isValid = false;
            } else {
                document.getElementById('mobile-error').textContent = '';
            }
            
            // 如果表单验证不通过，恢复按钮状态并返回
            if (!isValid) {
                registerButton.disabled = false;
                registerButton.classList.remove('btn-loading');
                return false;
            }
            
            // 准备请求数据
            const registerData = {
                username: username,
                password: password,
                confirmPassword: confirmPassword,
                realName: realName,
                email: email,
                mobile: mobile,
                role: role
            };
            
            // 发送注册请求
            fetch('/api/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(registerData)
            })
            .then(response => response.json())
            .then(data => {
                    registerButton.disabled = false;
                    registerButton.classList.remove('btn-loading');
                
                if (data.code === 200) {
                    // 注册成功
                    showAlert('success', '注册成功！即将跳转到登录页面...');
                    setTimeout(() => {
                        window.location.href = '/login';
                    }, 2000);
                } else {
                    // 注册失败
                    showAlert('error', data.message || '注册失败，请稍后再试');
                }
            })
            .catch(error => {
                console.error('注册请求出错:', error);
                registerButton.disabled = false;
                registerButton.classList.remove('btn-loading');
                showAlert('error', '网络错误，请稍后再试');
            });
            
            return false;
        }
        
        // 显示提示信息
        function showAlert(type, message) {
            const alertContainer = document.getElementById('alertContainer');
            
            // 创建提示框
            const alertElement = document.createElement('div');
            alertElement.className = `alert alert-${type}`;
            alertElement.innerHTML = `
                <span class="alert-icon">
                    ${type === 'success' ? '✓' : type === 'error' ? '✗' : type === 'warning' ? '⚠' : 'ℹ'}
                </span>
                <span class="alert-message">${message}</span>
                <button type="button" class="alert-close" onclick="this.parentElement.remove()">×</button>
            `;
            
            // 添加到容器
            alertContainer.innerHTML = '';
            alertContainer.appendChild(alertElement);
            
            // 5秒后自动关闭
            if (type !== 'error') {
            setTimeout(() => {
                    if (alertElement.parentElement) {
                        alertElement.remove();
                    }
                }, 5000);
            }
        }
        
        // 辅助函数 - 验证邮箱
        function validateEmail(email) {
            const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(String(email).toLowerCase());
        }
        
        // 辅助函数 - 验证手机号
        function validateMobile(mobile) {
            const re = /^1[3-9]\d{9}$/;
            return re.test(String(mobile));
        }
    </script>
</body>
</html> 